<template>
    <div class="successBox">
        <van-nav-bar title="充值成功页" />
        <van-empty image="@/image/imgSuccess.jpg" image-size="80" description="充值成功">
            <van-button type="primary" to="/mywallet">立即查看</van-button>
        </van-empty>
        <div class="successListBox">
            <dl v-for="(item, index) in DoctorList" :key="index">
                <dt>
                    <img :src="item.img" alt="">
                </dt>
                <dd>
                    <ul>
                        <li style="display: flex; align-items: center;">
                            <h3>{{ item.title }}</h3>
                            &emsp;&emsp;
                            <span>副主任医生</span>
                        </li>
                        <li>{{ item.address }}</li>
                        <li style="display: flex; align-items: center;">好评率&emsp13;
                            <span>{{ item.favorable }}%</span>&emsp13;
                            服务患者数&emsp13;
                            <span>{{ item.price }}</span>
                        </li>
                    </ul>
                    <el-button type="primary" style="margin-top: 10px;">立即咨询</el-button>
                </dd>
            </dl>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';

interface Doctor {
    img: string,
    title: string,
    address: string,
    favorable: number,
    price: number
}
const DoctorList = ref<Doctor []>([])

const getDoctorList = async () => {
    const res = await axios.get('/v3/doctorlist')
    console.log(res.data);
    const { doctorList } = res.data
    DoctorList.value = doctorList
}
getDoctorList()

</script>

<style lang="scss">
@import './index.scss';
</style>